<template>
  <el-container>
    <div class="c1">
      <el-form :inline="true" :model="searchData" class="demo-form-inline s1">
        <el-form-item class="inpcon">
          <el-input
            v-model="searchData.method"
            style="margin-right: 5px"
            placeholder="输入'请求方式'内容查询"
          ></el-input>
          <el-input
            v-model="searchData.requestURI"
            style="margin-right: 5px"
            placeholder="输入'请求路径'内容查询"
          ></el-input>
          <el-input
            v-model="searchData.id"
            style="margin-right: 5px"
            placeholder="输入id内容查询"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            size="mini"
            type="success"
            icon="el-icon-search"
            @click="searchBtn(searchData)"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-refresh-left"
            @click="searchrestBtn(searchData)"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="addmenu"
          >新增</el-button
        >
        <el-button
          :loading="downloadLoading"
          size="mini"
          class="dBtn"
          type="warning"
          icon="el-icon-download"
          @click="download"
          >导出</el-button
        >
      </div>
    </div>

    <el-card class="c2">
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        max-height="450"
        align="center"
      >
        <el-table-column fixed="left" type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column width="170" prop="requestURI" label="请求路径">
        </el-table-column>
        <el-table-column width="150" label="响应体">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-info"
              type="success"
              size="mini"
              @click="detail(scope.row.responseBody)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
        <el-table-column width="150" prop="remoteHost" label="客户端主机名/IP">
        </el-table-column>

        <el-table-column width="200" prop="protocol" label="请求协议类型及版本">
        </el-table-column>
        <el-table-column width="400" prop="requestURL" label="请求概略信息">
        </el-table-column>
        <el-table-column prop="answer" label="响应时间">
          <template slot-scope="scope">
            <el-tag size="mini">{{ scope.row.answer + "ms" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="400" label="请求头">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-info"
              type="success"
              size="mini"
              @click="detail2(scope.row.headers)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="handleDelete(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column> </el-table
    ></el-card>
    <el-footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageNum.currentPage"
        :page-sizes="[50, 100, 200, 300]"
        :page-size="this.pageNum.perPage_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.pageNum.total"
      >
      </el-pagination>
    </el-footer>
    <!-- 新增日志对话框 start -->

    <el-dialog
      title="新增日志"
      :visible.sync="addmenuDialogVisible"
      width="50%"
    >
      <el-form
        class="editform"
        label-width="100px"
        :model="addData"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="请求头信息" prop="headers">
          <el-input v-model="addData.headers"></el-input>
        </el-form-item>
        <el-form-item label="请求方式" prop="method">
          <el-input v-model="addData.path"></el-input>
        </el-form-item>
        <el-form-item label="请求协议类型以及版本" prop="protocol">
          <el-input v-model="addData.protocol"></el-input>
        </el-form-item>
        <el-form-item label="请求参数" prop="queryString">
          <el-input v-model="addData.queryString"></el-input>
        </el-form-item>
        <el-form-item label="客户端主机名或IP" prop="remoteHost">
          <el-input v-model="addData.remoteHost"></el-input>
        </el-form-item>
        <el-form-item label="请求body" prop="requestBody">
          <el-input v-model="addData.requestBody"></el-input>
        </el-form-item>
        <el-form-item label="请求路径" prop="requestURI">
          <el-input v-model="addData.requestURI"></el-input>
        </el-form-item>
        <el-form-item label="请求概略信息" prop="requestURL">
          <el-input v-model="addData.requestURL"></el-input>
        </el-form-item>
        <el-form-item label="响应body" prop="responseBody">
          <el-input v-model="addData.responseBody"></el-input>
        </el-form-item>
        <el-form-item label="请求协议类型	" prop="scheme">
          <el-input v-model="addData.scheme"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增日志对话框 end -->

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="80%">
      <p>{{ detailData }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="detailDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="delmenuDialogVisible" width="30%">
      确认删除吗?
      <span slot="footer" class="dialog-footer">
        <el-button @click="delmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="提示" :visible.sync="editmenuDialogVisible" width="50%">
      <el-form
        class="editform"
        label-width="100px"
        :model="editDate"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="请求头信息" prop="headers">
          <el-input v-model="addData.headers"></el-input>
        </el-form-item>
        <el-form-item label="请求方式" prop="method">
          <el-input v-model="addData.path"></el-input>
        </el-form-item>
        <el-form-item label="请求协议类型以及版本" prop="protocol">
          <el-input v-model="addData.protocol"></el-input>
        </el-form-item>
        <el-form-item label="请求参数" prop="queryString">
          <el-input v-model="addData.queryString"></el-input>
        </el-form-item>
        <el-form-item label="客户端主机名或IP" prop="remoteHost">
          <el-input v-model="addData.remoteHost"></el-input>
        </el-form-item>
        <el-form-item label="请求body" prop="requestBody">
          <el-input v-model="addData.requestBody"></el-input>
        </el-form-item>
        <el-form-item label="请求路径" prop="requestURI">
          <el-input v-model="addData.requestURI"></el-input>
        </el-form-item>
        <el-form-item label="请求概略信息" prop="requestURL">
          <el-input v-model="addData.requestURL"></el-input>
        </el-form-item>
        <el-form-item label="响应body" prop="responseBody">
          <el-input v-model="addData.responseBody"></el-input>
        </el-form-item>
        <el-form-item label="请求协议类型	" prop="scheme">
          <el-input v-model="addData.scheme"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editmenuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editmenuDialog">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import axios from "../utils/axios";
import { loggerDao, downloadFile } from "../utils/api";

export default {
  methods: {
    
    //查看详情

    detail(con) {
      this.detailDialogVisible = true;
      this.detailData = con;
    },
    detail2(con) {
      this.detailDialogVisible = true;
      this.detailData = con;
    },

    //查询日志

    getLogList(con) {
      axios({
        method: "GET",
        url: "/log/logger",
        params: con,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.pageNum.current = res.data.current;
          this.pageNum.size = res.data.size;
          this.pageNum.total = res.data.total;
          this.loading = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //页码

    handleSizeChange(val) {
      this.pageNum.size = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getLogList(this.searchData);
      } else {
        this.getLogList(this.pageNum);
      }
    },
    handleCurrentChange(val) {
      this.pageNum.current = val;
      if (this.searchToggle) {
        this.searchData.current = this.pageNum.current;
        this.searchData.size = this.pageNum.size;
        this.getLogList(this.searchData);
      } else {
        this.getLogList(this.pageNum);
      }
    },

    //添加

    addmenu() {
      this.addmenuDialogVisible = true;
    },

    addmenuDialog() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          axios({
            method: "POST",
            url: "/log/logger",
            data: this.addData,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.addmenuDialogVisible = false;
              this.getLogList(this.pageNum);
            } else {
              console.log(res);
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("内容不完整");
        }
      });
    },

    //查询

    searchBtn(con) {
      this.getLogList(con);
      this.searchToggle = true;
    },

    //导出

    download() {
      loggerDao.then((res) => {
        this.downloadLoading = false;
        downloadFile(res, "日志导出表", "xlsx");
      });
    },

    //重置

    searchrestBtn(con) {
      this.searchData.id = "";
      this.searchData.method = "";
      this.searchData.requestURI = "";
      this.getLogList(con);
      this.searchToggle = false;
    },

    //删除

    handleDelete(con) {
      this.delmenuDialogVisible = true;
      this.delDate.id = con;
    },
    delmenuDialog() {
      axios({
        method: "delete",
        url: "/log/logger",

        params: this.delDate,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.delmenuDialogVisible = false;
          this.getLogList(this.pageNum);
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //修改

    handleEdit(con) {
      this.editmenuDialogVisible = true;
      this.editDate.headers = con.headers;
      this.editDate.id = con.id;
      this.editDate.method = con.method;
      this.editDate.protocol = con.protocol;
      this.editDate.queryString = con.queryString;
      this.editDate.remoteHost = con.remoteHost;
      this.editDate.requestBody = con.requestBody;
      this.editDate.responseBody = con.responseBody;
      this.editDate.requestURI = con.requestURI;
      this.editDate.requestURL = con.requestURL;
      this.editDate.scheme = con.scheme;
    },

    editmenuDialog() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          axios({
            method: "PUT",
            url: "/sys/menu",
            data: this.editDate,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("添加成功");
              this.editmenuDialogVisible = false;
              this.getLogList(this.pageNum);
            } else {
              console.log(res);
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("内容不完整");
        }
      });
    },
  },

  data() {
    return {
      pageNum: {
        current: 1,
        size: 50,
        total: 0,
      },
      addmenuDialogVisible: false,
      delmenuDialogVisible: false,
      editmenuDialogVisible: false,
      detailDialogVisible: false,
      searchToggle: false,
      loading: true,
      downloadLoading: false,
      delDate: {},
      detailData: {},
      searchData: {},
      editDate: {
        headers: "",
        id: "",
        method: "",
        protocol: "",
        queryString: "",
        remoteHost: "",
        requestBody: "",
        requestURI: "",
        requestURL: "",
        responseBody: "",
        scheme: "",
      },
      tableData: [],
      addData: {
        headers: "",
        method: "",
        protocol: "",
        queryString: "",
        remoteHost: "",
        requestBody: "",
        requestURI: "",
        requestURL: "",
        responseBody: "",
        scheme: "",
      },

      rules: {
        name: [{ required: true, message: "必填", trigger: "blur" }],
        path: [{ required: true, message: "必填", trigger: "blur" }],
        icon: [{ required: true, message: "必填", trigger: "blur" }],
        authStr: [{ required: true, message: "必填", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getLogList(this.pageNum);
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
}
.el-card {
  width: 100%;
}
.el-footer {
  align-self: start;
  margin-top: 1.5rem;
}

.s1 {
  height: 0;

  display: flex;
  align-items: center;
  margin-left: -2rem;
}

.inpcon {
  display: flex;
  justify-content: space-around;
}
.inpcon .el-input {
  width: 30%;
  font-size: 12px;
}
.el-input /deep/.el-input__inner {
  height: 3.05rem;
}
.c1 {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  width: 100%;
  min-height: 5rem;
}
.editform {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: left;

  .el-input /deep/.el-input__inner {
    height: 3.05rem;
    font-size: 12px !important;
  }
}
.el-input /deep/.el-input__inner {
  height: 3.05rem;
  font-size: 12px !important;
}
.editform /deep/ .el-form-item {
  display: inline-block;
  margin-left: 1rem;

  width: 45%;
}
.editform /deep/ .el-form-item__content {
  height: 3.05rem;
}
.el-table /deep/ thead {
  font-size: 12.5px;
  color: #909399;
  font-weight: 700;
}
</style>